<!--1页面底端固定在页面最底端-->
<!--2input中只能输入数字，通过onkeyup和onafterpaste控制-->
<!--3.添加表格Y轴滚动，要设置style="overflow-y: scroll;height: 200px"-->
<!--4.设置底部div固定不动，是通过CSS设置的-->
<!--5.循环取出每一行的值-->
<!--6.设置div滚动条自动到底端，设置div.scrollTop = div.scrollHeight;-->
<!--7.P标签赋值用html()-->
<!--8.该函数为按了回车键触发的事件-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('系统管理员操作界面')"/>
    <link th:href="@{/ruoyi/css/jquery-confirm.min.css}" rel="stylesheet"/>
</head>
<style type="text/css">
    /*1页面底端固定在页面最底端*/
    #yjm{
        width: 80%;
        min-width: 768px;
        position: fixed;
        z-index: 302;
        bottom: 0;
        left: auto;
        height: auto;
        overflow: hidden;
        zoom: 1;
        margin: 0px auto;
        background-color: #fbfbfb;
        text-align: left;
        line-height:80px;
    }
</style>
<body onkeydown="keyLogin()" style="width: 80%;margin: 0px auto;height: 100px">
<div class="modal-content">
    <div class="modal-header">
        <h1 modal-title style="font-size: 72px"><strong>销售出库</strong></h1>

        <div class="btn-group-sm" id="toolbar" role="group" style="float: right">
            <a class="btn btn-success" onclick="tjsb()" id="xinz">
                <i class="fa fa-pencil"></i> 新增
            </a>
            <a class="btn btn-danger" onclick="Mysbtz()" id="xiug">
                <i class="fa fa-remove"></i> 修改
            </a>
            <a class="btn btn-info" id="baoc">
                <i class="fa fa-remove"></i> 保存
            </a>
            <a class="btn btn-info" onclick="dywhjl()" id="shanc">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-info" onclick="dywhjl()" id="tij">
                <i class="fa fa-remove"></i> 提交
            </a>
        </div>

    </div>
    <div class="modal-body">
        <div class="row">
            <div class="form-group">
                <label class="col-sm-1 control-label"> 日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期：</label>
                <div class="col-sm-2">
                    <input name="gsid" id="rq_input" class="form-control" type="text" style="background-color: #ffffff">
                </div>
                <label class="col-sm-1 control-label"> 订&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
                <div class="col-sm-2">
                    <input name="sbmc" id="ddh_input" class="form-control" type="text"
                           style="background-color: #ffffff">
                </div>
                <label class="col-sm-1 control-label"> 客&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                <div class="col-sm-2">
                    <input name="sbbh"  id="ksm_input" class="form-control" type="text"
                           style="background-color: #ffffff;">
                </div>
                <label class="col-sm-1 control-label"> 客&nbsp;&nbsp;商&nbsp;&nbsp;名&nbsp;&nbsp;称：</label>
                <div class="col-sm-2">
                    <input name="sbbh" id="ksmc_input" class="form-control" type="text"
                           style="background-color: #ffffff">
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="form-group">
                <label class="col-md-4 control-label"><h1>请输入药品监管码：</h1></label>
                <div class="col-md-8" style="margin-left: -10%">
                    <!--2input中只能输入数字，通过onkeyup和onafterpaste控制-->
                    <strong><input class="form-control" style="font-family: Arial;font-size: 50px;float: left;height: 80px;width: auto;" type="text"
                                   id="stuName"
                                   onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                   onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                   placeholder="请输入药品电子监管码">
                        <!--<input type="button" id="login" value="添加" onclick="change()">--></strong>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="form-group">
                <!--3.添加表格Y轴滚动，要设置style="overflow-y: scroll;height: 200px"-->
                <div class="col-sm-12 select-table table-striped" id="divid_sbtz" style="overflow-y: scroll;height: 200px">
                    <table class='table table-hover table-bordered' cellpadding='0' border='1' cellspacing='0'
                           id="stuTable">
                        <tr id="table0">
                            <th style="font-size: 21px">序号</th>
                            <th style="font-size: 21px">药监码</th>
                            <th style="font-size: 21px">操作</th>
                        </tr>
                    </table>
                </div>

                <div style="display: none">
                    <form id="form-user-add" class="form-horizontal">

                    </form>
                </div>

            </div>
        </div>

    </div>
    <!--4.设置底部div固定不动，是通过CSS设置的-->
            <div id="yjm" >
                <label class="col-lg-6 control-label" style="text-align: center"><h1 style="text-align: center"><strong>已扫描药监码数量：</strong></h1></label>
                <div class="col-lg-6">
                    <strong style="font-family: Arial;font-size: 100px;color: red;" ><p type="text" id="scan"
                                                                                      style="border: #ffffff";></p></strong>
                </div>
            </div>
</div>
<div th:replace="zdyyj :: myfooter"></div>
<!--<p>[[${url}]]</p>-->
<th:block th:include="include :: footer"/>
<script th:src="@{/ruoyi/js/jquery-confirm.min.js}"></script>
<script th:inline="javascript">
    var shuzu = [];
    var intddh=""
    var intksm=""
    $("#ddh_input").focus(function () {
        intddh=document.getElementById("ddh_input").value
    })
    $("#ksm_input").focus(function () {
        intksm=document.getElementById("ksm_input").value
    })
    $("#ddh_input").change(function () {
        var ints=$("#scan").html()
        if(ints>='1'){
            $.confirm({
                title: '确认修改吗？',
                content: '您将修改订单号信息，您确定修改吗？',
                buttons: {
                    确认: {
                        text: '确认',
                        btnClass: 'btn-blue',
                        action: function(){
                            $("#stuTable tr:not(:first)").remove()
                            $("#scan").html("0")
                        }
                    },
                    取消: {
                        text: '取消',
                        btnClass: 'btn-blue',
                        action: function(){
                            $("#ddh_input").val(intddh)
                        }
                    }
                }
            });
            // $("#stuTable tr:not(:first)").empty()
            // $("#stuTable tr:not(:first)").html("")
        }
    })

    $("#ksm_input").change(function () {
        var ints=$("#scan").html()
        if(ints>='1'){
            $.confirm({
                title: '确认修改客商码吗？',
                content: '您将修改客商码信息，您确定修改吗？',
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'btn-blue',
                        action: function(){
                            $("#stuTable tr:not(:first)").remove()
                            $("#scan").html("0")
                        }
                    },
                    cancel: {
                        text: '取消',
                        btnClass: 'btn-blue',
                        action: function(){
                            $("#ksm_input").val(intksm)
                        }
                    }
                }
            });
            // $("#stuTable tr:not(:first)").empty()
            // $("#stuTable tr:not(:first)").html("")
        }
    })

    function del(trId) {
        var tableObject = document.getElementById("stuTable");
        var tableRowObject = document.getElementById(trId);
        var index = tableObject.rows.length-2;
        tableObject.deleteRow(tableRowObject.rowIndex);
        $("#scan").html(index);
    }
// 8.该函数为按了回车键触发的事件
    function keyLogin() {
        if (event.keyCode == 13) {
            change()
            document.getElementById("stuName").value = "";
            document.getElementById("stuName").focus()
        }
    }

    $(document).ready(function () {
        $("#scan").html(0)

    })

    function change() {
        var rq=document.getElementById("rq_input").value;
        var ddh= document.getElementById("ddh_input").value;
        var ksm= document.getElementById("ksm_input").value;
        var stuName = document.getElementById("stuName").value;
        var stuTable = document.getElementById("stuTable");
        if (rq==""){
            alert("请选择日期")
            stuTable.empty()
        } else if (ddh=="")
        {
            alert("请填写订单号")
            stuTable.empty()
        }else if(ksm==""){
            alert("请填写客商码")
            stuTable.empty()
        }
        //     var tableInfo = "";
        //     var tableObj = document.getElementById("stuTable");
        //     //  alert(tableObj.rows.length);
        //     //从第二行开始获取数据
        //     for (var i = 2; i < tableObj.rows.length; i++) {  //遍历Table的所有Row
        //         for (var j = 0; j < tableObj.rows[i].cells.length; j++) {  //遍历Row中的每一列
        //             tableInfo += tableObj.rows[i].cells[j].getElementsByTagName("td")[0].value;  //获取Table中单元格的内容
        //             tableInfo += ",";
        //         }
        //     }
        //     alert (tableInfo);

        var tb = document.getElementById('stuTable');    // table 的 id
        var rows = tb.rows;                           // 获取表格所有行
        // 5.循环取出每一行的值
        for (var i = 0; i < rows.length; i++) {
            shuzu[i] = rows[i].cells[1].innerHTML
        }
//数组长度为1并且输入框输入的数据不为空并且输入框中的长度为20
        if (stuName.length != 20){
            document.getElementById("stuName").focus()
            alert("药品监管码长度错误")
        }else if (shuzu.length == 0 && stuName != ""&&stuName.length == 20) {
            var index = stuTable.rows.length;
            var tableRowObj = stuTable.insertRow(index);
            var trId = "table" + index;
            tableRowObj.id = trId;
            var tableCell0 = tableRowObj.insertCell(0);
            var tableCell1 = tableRowObj.insertCell(1);
            var tableCell2 = tableRowObj.insertCell(2);
            tableCell0.style.fontSize="18px"
            tableCell0.setAttribute("name","xh")
            tableCell0.setAttribute("id",trId)
            tableCell0.innerHTML = index+1;
            tableCell1.style.fontSize="18px"
            tableCell1.setAttribute("name","code")
            tableCell1.setAttribute("id",trId)
            tableCell1.innerHTML = stuName;
            tableCell2.style.fontSize="18px"
            // 6.设置div滚动条自动到底端，设置div.scrollTop = div.scrollHeight;
            var div = document.getElementById('divid_sbtz');
            div.scrollTop = div.scrollHeight;
            tableCell2.innerHTML = '<input type="button" value="删除" onclick="del(\'' + trId + '\')">';
            document.getElementById("stuName").focus()
            // 7.P标签赋值用html()
            $("#scan").html(index+1);
        } else if (shuzu.length == 1 && stuName != ""&&stuName.length == 20) {
            var index = stuTable.rows.length;
            var tableRowObj = stuTable.insertRow(index);
            var trId = "table" + index;
            tableRowObj.id = trId;
            var tableCell0 = tableRowObj.insertCell(0);
            var tableCell1 = tableRowObj.insertCell(1);
            var tableCell2 = tableRowObj.insertCell(2);
            tableCell0.style.fontSize="18px"
            tableCell0.setAttribute("name","xh")
            tableCell0.setAttribute("id",trId)
            tableCell0.innerHTML = index;
            tableCell1.style.fontSize="18px"
            tableCell1.setAttribute("name","code")
            tableCell1.setAttribute("id",trId)
            tableCell1.innerHTML = stuName;
            tableCell2.style.fontSize="18px"
            tableCell0.setAttribute("id",trId)
            // 6.设置div滚动条自动到底端，设置div.scrollTop = div.scrollHeight;
            var div = document.getElementById('divid_sbtz');
            div.scrollTop = div.scrollHeight;
            tableCell2.innerHTML = '<input type="button" value="删除" onclick="del(\'' + trId + '\')">';
            document.getElementById("stuName").focus()
            // 7.P标签赋值用html()
            $("#scan").html(index);
        } else if (shuzu.length > 1 && stuName != ""&&stuName.length == 20) {
            shuzu.shift()
            if (shuzu.indexOf(stuName) == -1) {
                var index = stuTable.rows.length;
                var tableRowObj = stuTable.insertRow(index);
                var trId = "table" + index;
                tableRowObj.id = trId;
                var tableCell0 = tableRowObj.insertCell(0);
                var tableCell1 = tableRowObj.insertCell(1);
                var tableCell2 = tableRowObj.insertCell(2);
                document.getElementById("stuName").focus()
                tableCell0.style.fontSize="18px"
                tableCell0.setAttribute("name","xh")
                tableCell1.setAttribute("id",trId)
                tableCell0.innerHTML = index;
                tableCell1.style.fontSize="18px"
                tableCell1.setAttribute("name","code")
                tableCell1.setAttribute("id",trId)
                tableCell1.innerHTML = stuName;
                tableCell2.style.fontSize="18px"
                var div = document.getElementById('divid_sbtz');
                div.scrollTop = div.scrollHeight;
                tableCell2.innerHTML = '<input type="button" value="删除" onclick="del(\'' + trId + '\')">';
                document.getElementById("stuName").focus()
                $("#scan").html(index);
            } else {
                alert("数据重复了")
            }
        }
    }

    $('#baoc').click(function () {
        var tb = document.getElementById('stuTable');    // table 的 id
        var rows = tb.rows;                           // 获取表格所有行
        // 5.循环取出每一行的值
        // $('#form-user-add').empty()
        var shuzu=""
        $('#form-user-add').empty()
        for (var i = 0; i < rows.length; i++) {
            if (i>=1){
                shuzu = rows[i].children[1].innerText
                tables = "<input "
                    + "type='text' name='code' value='"+shuzu+"' '>" + shuzu + "</td>";
                $('#form-user-add').append(tables);
            }
        }
        alert($("#form-user-add").serialize())
        $.ajax({
            url: "/sbgl/xsck/insertxsck",
            type: 'POST',
            data: $("#form-user-add").serialize(),
            success: function (result) {
                if (result != null) {
                    alert("添加商品成功！！！");
                }
            }
        });
    });

</script>

</body>
</html>